<template>
	<view class='container'>
		<view class="left">
			<view class="leftcircle">
			</view>
		</view>
		<view class="right">
			<view class="rightcircle" ></view>
		</view>
		<view class="cneter-box">
			<slot>
				{{progress*100}}%
			</slot>
		</view>
		
	</view>
</template>
<script setup>
	/**
	 * c-lockScreen 环形进度条
	 * @property {Number} progress 进度 0-1 默认0
	 * @property {String} color 进度条颜色 默认#3ec3c1
	 * @property {String} size 进度条尺寸 单位rpx 默认200rpx
	 * */
	import {
		ref,
		computed
	} from 'vue'
	const prpps = defineProps({
		progress: {
			type: Number,
			default: 0
		},
		color: {
			type: String,
			default: '#3ec3c1'
		},
		size: {
			type: String,
			default: "200rpx"
		}
	})
	const rightAngle = computed(() => {
		if (prpps.progress >= 0.5) {
			return 45+'deg'
		} else {
			return -135 + 180 * prpps.progress * 2+'deg'
		}
	})
	const leftAngle = computed(() => {
		if (prpps.progress < 0.5) {
			return -135+'deg'
		} else {
			return -315 + 180 * prpps.progress * 2+'deg'
		}
	})
</script>
<style lang="scss">
	.container {
		display: flex;
		position: relative;
		width: v-bind(size);
		height: v-bind(size);
		.left {
			width: 49%;
			height: 100%;
			position: relative;
			overflow: hidden;
			top: 0;
			left: 0;

			.leftcircle {
				width: 163.2%;
				height: 80%;
				border-color:white;
				border-style: solid;
				border-width: calc(v-bind(size) * 0.1);
				position: absolute;
				border-radius: 50%;
				left: 0px;
				top: 0px;
				border-bottom-color:v-bind(color);
				border-left-color:v-bind(color);
				transition: transform 0.2s;
				transform: rotate(v-bind(leftAngle));

				// animation-name: circle_left;
				// animation-duration: 2s;
				// animation-timing-function: linear;
				// animation-iteration-count: infinite;

			}

		}

		.right {
			width: 49%;
			height: 100%;
			position: relative;
			overflow: hidden;
			top: 0;
			right: 0;
		}

		.rightcircle {
			width: 163.2%;
			height: 80%;
			border-radius: 50%;
			border-color:white;
			border-style: solid;
			border-width: calc(v-bind(size) * 0.1);
			position: absolute;
			border-top-color:v-bind(color);
			border-right-color:v-bind(color);
			right: 0px;
			top: 0px;
			// animation-name: circle_right;
			// animation-duration: 2s;
			// animation-timing-function: linear;
			// animation-iteration-count: infinite;
			transition: transform 0.2s;
			transform: rotate(v-bind(rightAngle));
		}
		.cneter-box{
			position: absolute;
			width: 100%;
			height: 100%;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}






	// @keyframes circle_right {
	// 	0% {
	// 		transform: rotate(-135deg);
	// 	}

	// 	50%,
	// 	100% {
	// 		transform: rotate(45deg);
	// 	}
	// }

	// @keyframes circle_left {

	// 	0%,
	// 	50% {
	// 		transform: rotate(-135deg);
	// 	}

	// 	100% {
	// 		transform: rotate(45deg);
	// 	}
	// }
</style>
